import React from "react";
import ReactSwipe from "react-swipe";
import PropTypes from "prop-types";
class Carousel extends React.Component {
  static propTypes = {
    imgArr: PropTypes.array,
    height: PropTypes.string
  };
  constructor(props) {
    super(props);
    this.state = {
      banner: []
    };
  }

  //Swipe exposes a few functions that can be useful for script control of your slider.
  //prev() slide to prev
  //next() slide to next
  //getPos() returns current slide index position
  //getNumSlides() returns the total amount of slides
  //slide(index, duration) slide to set index position (duration: speed of transition in milliseconds)

  render() {
    const style = {
      container: {
        height: this.props.height ? this.props.height : "auto",
        width: "100%",
        overflow: "hidden"
      },
      wrapper: {
        height: "100%",
        width: "200px",
        display:'flex',
        alignItems:'center'
      },
      child: {
        height: "100%",
        float: "left",
        width: "100%",
        position: "relative",
        overflow: "hidden"
      }
    };
    return (
      <ReactSwipe
        style={style}
        key={this.state.banner.length}
        swipeOptions={{
          //startSlide Integer (default:0) - index position Swipe should start at
          //speed Integer (default:300) - speed of prev and next transitions in milliseconds.
          //auto Integer - begin with auto slideshow (time in milliseconds between slides)
          //continuous Boolean (default:true) - create an infinite feel with no endpoints
          //disableScroll Boolean (default:false) - stop any touches on this container from scrolling the page
          //stopPropagation Boolean (default:false) - stop event propagation
          //swiping Function - invoked while swiping with the percentage (0-1) of the full width that has been swiped.
          //callback Function - runs at slide change.
          //transitionEnd Function - runs at the end slide transition.
          // startSlide: 2,
          speed: 400,
          auto: 3000,
          continuous: true,
          disableScroll: false,
          stopPropagation: false,
          callback: index => {
            // console.log(index)
          }
        }}
      >
        {this.state.banner
          ? this.state.banner.map((item,index) => {
              return (
                <div key={index}>
                  <img
                    style={{ width: "100%", height: "auto" }}
                    src={item.imgurl}
                    alt=""
                  />
                </div>
              );
            })
          : null}
      </ReactSwipe>
    );
  }
}

export default Carousel;
